<template>
  <div class="conditionalQuery">
    <div class="params">
      <div class="item">
        <div class="lable">名称</div>
        <el-input v-model="fileName" placeholder="请输入内容"></el-input>
      </div>
      <div class="item" v-if="filter">
        <div class="lable">筛选</div>
        <el-select v-model="screening" placeholder="请选择">
          <el-option v-for="item in screeningOPtion" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div class="item" v-if="state">
        <div class="lable">文档状态</div>
        <el-select v-model="screening" placeholder="请选择">
          <el-option v-for="item in fileStateOption" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>

      <div class="btn">
        <el-button @click="search" class="searchBtn" type="primary">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    state: {
      type: Boolean,
      default: false,
    },
    filter: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileStateOption: [
        {
          label: "解析成功",
          value: "0",
        },
        {
          label: "解析中",
          value: "1",
        },
        {
          label: "解析失败",
          value: "2",
        },
      ],
      screeningOPtion: [
        {
          label: "上传成功",
          value: "0",
        },
        {
          label: "上传中",
          value: "1",
        },
        {
          label: "上传失败",
          value: "2",
        },
      ],
      fileName: "", // 文件名
      screening: "", // 文件状态
      fileState: "", //
    };
  },
  methods: {
    search() {
      this.$emit("search", { fileName: this.fileName, screening: this.screening, fileState: this.fileState });
      this.$Bus.$emit("conditionalQuery", { fileName: this.fileName, screening: this.screening, fileState: this.fileState });
    },
    reset() {
      this.fileName = "";
      this.screening = "";
      this.fileState = "";
      this.$emit("search", { fileName: this.fileName, screening: this.screening, fileState: this.fileState });
      this.$Bus.$emit("conditionalQuery", { fileName: this.fileName, screening: this.screening, fileState: this.fileState });
    },
  },
};
</script>
<style lang="scss" scoped>
.conditionalQuery {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  .params {
    display: flex;
    align-items: flex-end;
    text-align: left;
    padding: 10px 20px;
    .item {
      margin-right: 20px;
      .lable {
        // line-height: 30px;
        margin-bottom: 8px;
        margin-left: 3px;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      .el-button {
        width: 113px;
      }
      .searchBtn {
        width: 113px;
        background: linear-gradient(49deg, #0a5ae0 0%, #6d9eff 100%);
      }
    }
  }
}
</style>
